<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>iUI Touch - Extensions - Video</title>
	<meta name="description" content="iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for smartphones & mobile devices.">
	<link href="../../../medias/images/favicon.png" rel="icon" type="image/png" /> 
	<link href="../../../medias/images/favicon.ico" rel="shortcut icon" />
	<link rel="image_src" type="image/jpeg" href="../../../medias/images/thumb.jpg" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<link rel='stylesheet' type='text/css' media="screen" href='../../../medias/css/globals.css' />
	<link rel='stylesheet' type='text/css' media="screen" href='../../../medias/css/documentation.css' />
	<link rel='stylesheet' type='text/css' media="screen" href='../../../medias/css/extensions.css' />
	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="../../../medias/css/ie6.css"><![endif]-->

	<script type='text/javascript' src="../../../medias/scripts/global.js"></script>
	<script type='text/javascript' src="../../../medias/scripts/documentation.js"></script>

</head>

<body>

	<div id="main">

		<div id="menu">
			<ul>
				<li><span class="logo"></span></li>
				<li><a href="../../../" class="home"><span>Home</span></a></li>
				<li><a href="../../../about" class="about"><span>About</span></a></li>
				<li><a href="../../../demo" class="demo"><span>Demo</span></a></li>
				<li><a href="../../../download" class="download"><span>Download</span></a></li>
				<li><a href="../../../docs" class="documentation active"><span>Documentation</span></a></li>
				<li><a href="../../../gallery" class="gallery"><span>Gallery</span></a></li>
				<li><a href="../../../get-involved" class="involved"><span>Get Involved</span></a></li>
				<li><form method="GET" action="http://www.google.com/search" name="header_search">
					<a href="#" id="emptysearch" onclick="empty('search_q');hide(this.id)"></a>
					<input type="text" name="q" id="search_q" class="searchform" onFocus="checkHeaderSearch()" onKeyUp="checkHeaderSearch()" value="">
					<input type="hidden" name="sitesearch" value="iui-js.org">
					<input type="submit" value="search" class="hide">
				</form></li>
			</ul>
	
		</div>
	
		<hr>

		<div id="header">
			<h1>iUI Extensions - Video</h1>
		</div>


		<div id="content">

			<div class="col-left">
				<h2>Video</h2> 

				<p class="tcenter">
					<img src="../images/extensions-video.jpg">
				</p>
				<p>
					You can now place compatible HTML5 video in iUI "pages".
				</p>
				<p class="tcenter">
					<a href="../iui/web-app/iui/ext-sandbox/video/" class="btn" target="_blank">Test Video</a>
				</p>

			</div>
			
			<div class="col-right">
				<div>
					<strong>Unloader</strong><br />
					Author: Sean Gilligan<br />
					Version: 1.0
				</div>
				<div>
					<strong>See also</strong><br />
					- <a href="../getting-started.html">Getting Started</a><br />
					- <a href="../../../faq">Frequently Asked Questions</a><br />
					- <a href="../iui-documentation.html">iUI code documentation</a><br />
					- <a href="../styles-themes.html">Advanced styling & themes</a><br />
				</div>

				<div>
					<strong>Get Involved</strong><br />
					Like in most open-source projects, the more we are, the meyer it is! HTML/CSS/JS, documentation, design, translation, ...<br />
					<a href="../../../get-involved">Don't be shy</a>
				</div>
			</div>

			<div class="col-left">
				<h5>1. Instructions to use</h5> 

				<p>
					The Video Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-video.js to your main index file just like the you would iui.js.
				</p>
				<p>
					Use the following markup for each iUI view ("page") that contains a video:
				</p>
				<p>
<code>
&lt;div id="video1" title="Video 1">
&nbsp;&nbsp;&lt;a href="path/to/video.mp4" target="_self" rel="iuiposter">
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="path/to/poster.jpg" width="nnn" height="mmm">
&nbsp;&nbsp;&lt;/a>
&lt;/div>
</code>
				</p>
				<p>
					The Video Extension will automatically create a video tag and play the video when the iUI view (aka "page") is active.
				</p>

			</div>

			<div class="col-left">
				<p>
					<a href="../extensions.html">back to extensions</a>
				</p>
			</div>

		</div>

		<hr>

		<p id="footer">
			iUI-JS &copy; 2007 - iUI-JS is an opensource framwork released under MIT license - <a href="../../../sitemap">sitemap</a> - <a href="../../../donate">DONATE</a>
		</p>

	</div>
</body>
</html>